<template>
  <div>
    <a-input-search
        v-model="keyword"
        placeholder="请输入用户名"
        enter-button="搜索登录日志"
        style="width: 400px;margin-bottom: 20px"
        size="large"
        @search="onSearch"
    />
    <a-button style="margin-left: 10px" size="large" type="danger" @click="reset">
      重置
    </a-button>
    <a-table :loading="loading" :columns="columns" :data-source="logData" rowKey="id">
      <a slot="username" slot-scope="username">{{ username }}</a>
      <span slot="customTitle"><a-icon type="user"/> 用户名</span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: 'username',
    key: 'username',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'username'},
  },
  {
    title: 'IP地址',
    key: 'ip',
    dataIndex: 'ip',
  },
  {
    title: '登录时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
];

export default {
  name: "SysLog",
  data() {
    return {
      columns,
      logData: [],
      loading: false,
      keyword: ''
    }
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    loadTableData() {
      this.loading = true
      this.getRequest('/api/log/?name=' + this.keyword).then(resp => {
        if (resp) {
          if (this.keyword !== '' && resp.length === 0) this.$message.warning('未搜索到相关日志')
          this.loading = false
          this.logData = resp
        }
      })
    },
    onSearch() {
      if (this.keyword === '') {
        this.$message.warning('请输入搜索内容')
      } else {
        this.loadTableData()
      }
    },
    reset() {
      this.keyword = ''
      this.loadTableData()
    }
  }
}
</script>

<style scoped>

</style>